<template>
	<view>
		<u-tabs :list="navList" :current="current" :is-scroll="false" @change="tabsCurrent"></u-tabs>


		<view class="u-margin-top-20 u-margin-bottom-20" >
			<w-Carclassify @current='changeCurrent'></w-Carclassify>
		</view>

		<view style="width: 700rpx;margin: auto;" v-if="current==0 || current==3 || current==4">
			<view class="u-flex u-row-between u-margin-top-40">
				<view class="bg bg1" @click="go('精选题库')">
					<text class="u-font-32 u-font-weight">VIP精选</text></br>
					<text>500题+</text></br>
					<text class="u-font-20">免费技巧体验</text>
					<image src="/static/vip_icon.png"></image>
				</view>
				<view class="bg bg2" @click="go('精选题库')">
					<text class="u-font-32 u-font-weight">VIP精选</text></br>
					<text>500题+</text></br>
					<text class="u-font-24">特级讲师</text></br>
					<text class="u-font-20">免费技巧体验</text>
					<image src="/static/vip_icon.png"></image>
				</view>
			</view>
			
			
			<view class="u-flex u-row-between " style="margin: 40rpx 0;">
				<view v-for="(item,index) in classify" class="classify" @click="goClassify1(index,item)">
					<image :src="item.image"></image>
					<view class="u-margin-top-5">{{item.txt}}</view>
				</view>
			</view>
			
			<view  @click="lookVedio" class="u-flex u-row-between"  style="padding:40rpx 20rpx;background: #f1f1f1;border-radius: 10rpx;">
				<view class="u-flex">
				<u-icon size="50" name='play-circle-fill' ></u-icon>
				<text class="u-margin-left-20 u-font-weight">教学视频</text>	
				</view>
				<view class="u-type-info ">
					去观看
				</view>
				
			</view>
			
			<view class="u-flex u-row-between " style="margin: 40rpx 0;">
				<view  v-if="index==0" v-for="(item,index) in elseClassify" class="classify" @click="call">
					<image :src="item.image"></image>
					<view class="u-margin-top-5">{{item.txt}}</view>
				</view>
				<view v-if="index==1 || index==2 || index==3" v-for="(item,index) in elseClassify" class="classify" @click="$Go(item.url)">
					<image :src="item.image"></image>
					<view class="u-margin-top-5">{{item.txt}}</view>
				</view>
			</view>
		</view>
		
		<view style="width: 700rpx;margin: auto;" v-else>
			<view style="width: 700rpx;margin:20rpx auto;">
				<u-swiper name="cover" :list="banner" height="300"></u-swiper>
			</view>
			<view class="" style="margin: 20rpx 0;font-weight: bold;">考试科目</view>
			
			<view class="u-flex u-row-between u-flex-wrap">
				<view @click="play(index)" v-for="(item,index) in videoList" :key="index" class="u-margin-bottom-20">
					
					<image :src="item.cover" style="width: 300rpx;height: 200rpx;border-radius: 20rpx;"></image>
					
					<view class="u-text-center u-font-weight">
						{{item.title}}
					</view>
				    
				</view>
			</view>
			
		</view>
		
	
         <video id="myvideo" :src="video"  @fullscreenchange="fullscreenchange" style="position: absolute;top: -100%;"></video>

<w-vip ref='vip' isTitle="高级"></w-vip>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				video:'',
				banner: [],
				videoList:[{},{},{},{}],
				navList: [{
						name: "科目一"
					},
					{
						name: "科目二"
					},
					{
						name: "科目三"
					},
					{
						name: "科目四"
					},
					{
						name: "满分题库"
					}
				],
				current: 0,

				car_type: 1,
				classify:[{
					image:'/static/vip_classify_1.png',
					txt:"模拟考试"
				},{
					image:'/static/vip_classify_2.png',
					txt:"强化题"
				},{
					image:'/static/vip_classify_3.png',
					txt:"错题库"
				},{
					image:'/static/vip_classify_4.png',
					txt:"模拟成绩"
				}],
				
				elseClassify:[{
					image:'/static/else_classify_1.png',
					txt:"服务热线",
					url:''
				},{
					image:'/static/else_classify_2.png',
					txt:"使用方法",
					url:'/pages/parse/index?id=16'
				},{
					image:'/static/else_classify_3.png',
					txt:"学员信息",
					url:'/pages/student/index'
				},{
					image:'/static/else_classify_4.png',
					txt:"教练招生",
					url:'/pages/coach/qr'
				}],
				videoContext:'',
config:{}
			}

		},
		onLoad() {
			this.getBanner()
			this.getConfig()
		},
		methods: {
			call(){
				uni.makePhoneCall({
					phoneNumber:this.config.kfTel
				})
			},
			
			getConfig(){
				this.$u.post('/index/getConfig', {
					
				}).then(res => {
					this.config=res;
				}).catch(err => {
							
				})
			},
			fullscreenchange (e){
			
				if(!e.detail.fullScreen){
					this.video=''
					this.videoContext.stop()
				}
			},
			userInfo() {
				return new Promise((resolve, reject) => {
					this.$u.post('/user/information', {}).then(res => {
						resolve(res)
					}).catch(err => {
			
					})
				})
			},
		    async play(index){
				let userInfo = await this.userInfo();
				if(!userInfo.vvipId){
					this.$refs.vip.VipShow = true;
				}else{
					this.video=this.videoList[index].video
									this.videoContext = uni.createVideoContext('myvideo',this);
									this.videoContext.requestFullScreen();
				}
			
			},
			getVideo(){
				this.$u.post('/user/video', {
					subject:this.current+1,
					car_type:this.car_type
				}).then(res => {
					this.videoList=res;
				}).catch(err => {
							
				})
			},
			
			getBanner() {
				this.$u.post('/index/banner', {}).then(res => {
					this.banner = res;
				}).catch(err => {
			
				})
			},
			tabsCurrent(e){
				this.current=e
				this.getVideo()
			},
			lookVedio(){
				let subject=this.current+1;
				uni.navigateTo({
					url:"/pages/teaching/video?subject="+subject+'&vip=1'+'&car_type='+this.car_type+'&type='+'教学视频'
				})
			},
			goClassify1(index,item){
				let subject=this.current+1;
				if(index==0){
					uni.navigateTo({
						url:"/pages/case/index?subject="+subject+'&vip=1'+'&car_type='+this.car_type+'&type='+item.txt
					})
					return
				}
				if(index==1){
					uni.navigateTo({
						url:"/pages/vipPage/classify?subject="+subject+'&vip=1'+'&car_type='+this.car_type+'&type='+item.txt
					})
				}
				if(index==2){
					uni.navigateTo({
						url:'/pages/mistakes/index'
					})
					return
				}
				if(index==3){
					uni.navigateTo({
						url:'/pages/examination/record'
					})
					return
					
				}
				
			},
			changeCurrent(e) {
				this.car_type = e;
				this.getVideo()
			},
			go(txt){
				let subject=this.current+1;
				uni.navigateTo({
					url:"/pages/vipPage/classify?subject="+subject+'&vip=1'+'&car_type='+this.car_type+'&type='+txt
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 334rpx;
		height: 240rpx;

		border-radius: 10rpx;
		padding: 20rpx;
		color: #fff;
		line-height: 50rpx;
		position: relative;

		image {
			width: 96rpx;
			height: 96rpx;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
	}

	.bg1 {
		background: linear-gradient(180deg, #F4D40E, #EFB608);

	}

	.bg2 {
		background: linear-gradient(180deg, #FFA067, #FF7254);
	}
	
	
	.classify{
		text-align: center;
		color: #515151;
		image{
			width: 90rpx;
			height: 90rpx;
		}
	
	}
</style>
